import Reserveapi from '../../api/reserve.api'
import HTTP from '../../services/api';
import ReserveCard from '../../component/reserve/reserveCard'
import ReserveList from '../../component/reserve/reserveList';
import { message, notification, Button, Row, Col, Affix } from 'antd'
import React from 'react';


export default class Reserve extends React.Component {
    constructor() {
        super()
        this.state = {
            reserveinfo: [],
            show: true
        }
    }


    // 切换风格
    changeThisShow(){
        this.setState({show:!this.state.show})
    }
    getAllDrugInfo = async () => {
        let result = await HTTP({ method: 'get' }, Reserveapi.getAllreserve)
        try {
            if (result && result.status) {
                // message.info(result.msg)
                notification.success({
                    message: result.msg,
                    description: `获取到挂号记录有${result.info.length}条`
                }
                )
                this.setState({ reserveinfo: result.info })
            }
            else {
                message.error(result.msg)
            }
        } catch (err) {
            message.error('服务器异常')

        }
        console.log(result)

    }

    getReserveId = id => {
        // todo
    }
    componentDidMount() {
        this.getAllDrugInfo()
    }
    render() {
        let { reserveinfo, show } = this.state
        reserveinfo=[...reserveinfo,...reserveinfo,...reserveinfo]
        return (
            <div>
                <Affix style={{position:"fixed",top:'90px',right:'35px',zIndex:'1000'}} offsetTop={top}>
                    <Button type="primary" onClick={() => this.changeThisShow()}>
                        切换风格
                    </Button>
                </Affix>
                <Row gutter={16} justify='start' align='middle'>
                    {show ? reserveinfo.map(item => <Col span='4'><ReserveCard {...item} /></Col>) : <ReserveList reserveinfo={[...reserveinfo]} />}
                </Row>
            </div>
        );
    }
}


